<template>
  <div class="cart_search">
    <!-- 搜索框 -->
    <div class="search">
      <!-- 日期选择器 -->
      <div class="block">
        <span class="demonstration">租车时间:</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDay()"
        >
        </el-date-picker>
      </div>
      <!-- 搜索框 -->
      <div class="search_input">
        <input
          type="text"
          v-model="carName"
          placeholder="请输入你要查询的车型"
        />
        <button @click="searchCar(carName)" class="btn">搜索</button>
      </div>
    </div>
    <!-- 租车天数 -->
    <div class="rental_day">
      <em>*</em> 当前选定租期<span>{{ this.day }}</span
      >天
    </div>
    <!-- 车型选择 -->
    <div class="change_car">
      <div class="car_top">
        <ul>
          <li :class="{ active: isActive == 1 }" @click="changeClass(1)">
            <img @click="isHot()" src="/image/hotscale.png" alt="" />
          </li>
          <li :class="{ active: isActive == 2 }" @click="changeClass(2)">
            <p>经济型</p>
            <span> </span>
          </li>
          <li :class="{ active: isActive == 3 }" @click="changeClass(3)">
            <p>舒适型</p>
            <span> </span>
          </li>
          <li :class="{ active: isActive == 4 }" @click="changeClass(4)">
            <p>精英型</p>
            <span></span>
          </li>
          <li :class="{ active: isActive == 5 }" @click="changeClass(5)">
            <p>SUV</p>
            <span> </span>
          </li>
          <li :class="{ active: isActive == 6 }" @click="changeClass(6)">
            <p>电动型</p>
            <span> </span>
          </li>
          <li :class="{ active: isActive == 7 }" @click="changeClass(7)">
            <p>高端车</p>
            <span> </span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 品牌类型选择 -->
    <div class="car_type">
      <span>品牌:</span>
      <div class="type_detail">
        <a
          :class="{ Type: isType == -1 }"
          @click="changetype(-1)"
          href="javascript:;"
          >全部</a
        >
        <a
          href="javascript:;"
          v-for="item in cartypedata"
          :key="item.car_type_id"
          :class="{ Type: isType == item.car_type_id }"
          @click="changetype(item.car_type_id)"
          >{{ item.car_type_name }}</a
        >
      </div>
    </div>
    <!-- 根据车辆价格高低显示排序 -->
    <div class="car_price">
      <span>价格:</span>
      <a href="javascript:;" :class="{ isPrice: price == 1 }" @click="price = 1"
        >全部</a
      >
      <a href="javascript:;" :class="{ isPrice: price == 2 }" @click="price = 2"
        >100元以下</a
      >
      <a href="javascript:;" :class="{ isPrice: price == 3 }" @click="price = 3"
        >100-200以下</a
      >
      <a href="javascript:;" :class="{ isPrice: price == 4 }" @click="price = 4"
        >200-300元</a
      >
      <a href="javascript:;" :class="{ isPrice: price == 5 }" @click="price = 5"
        >300元以上</a
      >
      <span @click="changeImg()">
        <img v-show="showImg" src="/image/jianto_down.png" alt="" />
        <img v-show="!showImg" src="/image/jianto_up.png" alt="" />
      </span>
    </div>
    <!-- 根据 默认排序 租金排序 热度排序 -->
    <div class="car_sort">
      <ul>
        <li :class="{ bg_color: showBg == 1 }" @click="showBg = 1">
          <a href="javascript:;">默认排序</a>
        </li>
        <li :class="{ bg_color: showBg == 2 }" @click="showBg = 2">
          <a href="javascript:;">按租金</a>
          <img src="/image/down_jt.png" alt="" />
        </li>
        <li :class="{ bg_color: showBg == 3 }" @click="showBg = 3">
          <a href="javascript:;">按评分</a>
          <img src="/image/down_jt.png" alt="" />
        </li>
      </ul>
      <!-- 车型选择一共有多少种车型选择   -->
      <div class="car_sort_text">
        <!-- 动态数据可变化 -->
        <em>*</em>一共有<span>{{ count }}</span> 种车型可以选择
      </div>
    </div>
    <template v-if="data">
      <cart-list
        :day="this.day"
        :data="data"
        :location="this.formattedAddress"
        :rentTime="this.rentTime"
        :returnTime="this.returnTime"
      />
      <!-- <cart-list /> -->
    </template>
    <!-- 加载更多车型 -->
    <div class="car_load_more">
      <a href="javascript:;" @click="loadmore()" v-show="more">加载更多</a>
      <img v-show="!more" src="/image/loading.gif" alt="" />
    </div>
    <!-- 侧边栏地图 -->
    <div class="car_map">
      <div class="car_map_detail">
        <amap viewMode="3D" :center="center">
          <amap-marker
            :position="center"
            :lable="{
              content: '取车点(还车点)',
              direction: 'bottom',
            }"
          />
        </amap>
      </div>
      <div class="car_map_text">
        <span>取车门店:</span>
        <p>{{ this.province + this.citys }}</p>
        <span>{{ this.formattedAddress }}</span>
        <p>门店电话:188808029</p>
        <p>营业时间:08:00-21:00</p>
        <button @click="getLocationdeatil">点击获取当前门店信息</button>
      </div>
    </div>
  </div>
</template>

<script>
import CartList from "../components/CartList.vue";

export default {
  components: { CartList },
  data() {
    return {
      value1: "",
      day: 0,
      isActive: 1,
      isType: -1,
      price: 1,
      showImg: true,
      showBg: 1,
      more: true,
      center: null,
      formattedAddress: "未知",
      citys: "未知",
      province: "",
      data: [],
      page: 1,
      count: 0,
      cartypedata: [],
      carName: "",
      rentTime: null,
      returnTime: null,
    };
  },
  mounted() {
    var _this = this;
    // 获取当前经纬度信息
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        //locationSuccess 获取成功的话
        function (position) {
          // console.log(position);
          var log = position.coords.longitude;
          var lat = position.coords.latitude;
          // console.log(log);
          var center = [log, lat];
          _this.center = center;
        }
      );
    }
    //获取车辆信息
    this.getCarData(1);
    // 获取车辆类型信息学
    this.getcartype();
  },
  methods: {
    // 搜索车辆
    searchCar(payload) {
      this.axios.get(`/car/searchcar?carname=${payload}`).then((res) => {
        // console.log(res.data.code)
        if (res.data.code == 201) {
          this.data = res.data.data;
          // this.more=false
          this.count = 0;
          this.count += res.data.carCount;
          return;
          // alert('无查询结果')
        }
        this.count = 0;
        this.data = res.data.data;
        this.count += res.data.carCount;
        // console.log(res.data.carCount);
      });
    },
    //加载车辆类型信息
    getcartype() {
      this.axios.get("/car/cartype").then((res) => {
        // console.log(res.data.data);
        this.cartypedata = res.data.data;
      });
    },
    // 加载车辆信息数据
    getCarData(page = 1) {
      this.axios.get(`/car/cardata?page=${page}`).then((res) => {
        if (res.data.code == 201) {
          alert("暂无查询结果");
          return;
        }
        this.count += res.data.carCount;
        // console.log(res.data.carCount)
        this.data = this.data.concat(res.data.data);
      });
    },
    // 加载更多
    loadmore() {
      // console.log("加载更多");
      this.page++;
      // console.log(this.page)
      this.getCarData(this.page);
      this.more = false;
      setTimeout(() => {
        this.more = true;
      }, 2000);
    },
    // 显示箭头
    changeImg() {
      this.showImg = !this.showImg;
    },
    // 切换车辆
    changeClass(n) {
      this.isActive = n;
    },
    isHot() {
      // console.log('热销')
      this.axios.get("/car/ishot").then((res) => {
        // console.log(res)
        this.data = res.data.data;
        this.count = 0;
        this.count += res.data.carCount;
      });
    },
    changetype(n) {
      this.isType = n;
    },
    // 显示天数
    changeDay() {
      let time = this.value1[1] - this.value1[0];
      let day = this.moment(time).format("D");
      this.day = day;
      // console.log(this.value1);
      let day01 = this.moment(this.value1[0]).format("YYYY年MM月D日");
      let day02 = this.moment(this.value1[1]).format("YYYY年MM月D日");
      // console.log(day01)
      this.rentTime = day01;
      this.returnTime = day02;
      // console.log("租车时间" + this.rentTime);
      // console.log("还车时间" + this.returnTime);
    },
    // 点击获取门店信息
    getLocationdeatil() {
      // console.log("点击触发搜索");
      // console.log(this.center);
      this.getAddress(this.center);
      // console.log(this.formattedAddress);
    },
    // 逆地理编码
    getAddress(jw) {
      let self = this;
      AMap.plugin("AMap.Geocoder", function () {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: "全国",
        });
        geocoder.getAddress(jw, function (status, result) {
          if (status === "complete" && result.info === "OK") {
            self.formattedAddress = result.regeocode.formattedAddress;
            self.citys = result.regeocode.addressComponent.city;
            self.province = result.regeocode.addressComponent.province;
            // result为对应的地理位置详细信息
            // console.log( result.regeocode.addressComponent.city);
          }
        });
      });
    },
  },
};
</script>

<style src="../assets/css/cartsearch.css" scoped></style>
<style lang="scss" scoped></style>
